<template>
  <div>
    <i class="iconfont icon-4"></i>
    <span>站点切换</span>
    <el-select :value="id" filterable size="small" @change="siteChange">
      <el-option v-for="item in tableData" :key="item.siteId" :label="item.siteName" :value="item.siteId">
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { siteSwitcher } from '@/utils/api'
import { removeLook } from '@/utils/auth'
export default {
  name: 'sitelist',
  data() {
    return {
      tableData: [],
      id: null
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const Datas = await siteSwitcher()
      this.tableData = Datas
      if (this.tableData.length < 1) {
        this.$alert('没有找到站点数据', {
          type: 'error', showClose: false
        })
      }
      const ids = this.tableData.map(item => {
        return item.siteId
      })
      if (ids.indexOf(this.$store.state.site.siteId) < 0) {
        this.$store.dispatch('setSiteId', this.tableData[0].siteId)
        window.location.reload()
      } else {
        this.id = this.$store.state.site.siteId
      }
    },
    siteChange(n) {
      this.$confirm('即将切换站点, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true
      }).then(() => {
        removeLook()
        this.$store.dispatch('setSiteId', n)
        window.location.reload()
      }).catch(() => {

      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.screenfull {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #5a5e66;
  vertical-align: 10px;
  font-size: 14px;
  .iconfont {
    font-size: 22px;
  }
}
</style>
